<template>
	<view class="page-view flex flex-direction">
		<image src="../../static/bg2.png" mode="widthFix" class="bg"></image>
		<cu-custom ref="cuCustom" :isBack="true" bgImage="noImage">
			<template slot="backText">
				返回
			</template>
		</cu-custom>
		<scroll-view class="main flex-sub" :scroll-y="true">
			<view class="rank">
				<view class="userinfo flex align-center">
					<view class="avatar"><open-data type="userAvatarUrl"></open-data></view>
					<view>
						亲爱的：
						<open-data type="userNickName"></open-data>
					</view>
				</view>
				<view class="rankboard ">
					<view class="flex">
						<view class="rank-item flex-sub">
							<image class="bg" src="../../static/score_bg.png" mode="widthFix"></image>
							<view>
								<view class="title">您的综合</view>
								<view class="score">
									{{ info.gzscore || 0 }}
									<text>分</text>
								</view>
								<view class="btn" @tap="estimate(0)"><image src="../../static/btn.png" mode="widthFix"></image></view>
							</view>
						</view>
						<view class="rank-item flex-sub">
							<image class="bg" src="../../static/score_bg.png" mode="widthFix"></image>
							<view>
								<view class="title">您的英语</view>
								<view class="score">
									{{ info.enscore || 0 }}
									<text>分</text>
								</view>
								<view class="btn" @tap="estimate(1)"><image src="../../static/btn.png" mode="widthFix"></image></view>
							</view>
						</view>
						<!-- <view class="line"></view>
						<view class="rank-item flex-sub">
							<view>您的专业排名</view>
							<view class="score text-orange">
								<text>第</text>
								{{ info.rank || 0 }}
								<text>名</text>
							</view>
						</view> -->
					</view>

					<!-- <view class="warn flex">
						<image src="../../static/warn.png" mode="widthFix"></image>
						<view class="flex-sub">本排名基于大数据根据评估人数实时更新，此数据仅供参考，不作为录取依据。</view>
					</view> -->
				</view>
			</view>
			<view class="result">
				<image v-if="info.status == 0" class="emoji" src="../../static/cry.png" mode="widthFix"></image>
				<image v-else-if="info.status == 1" class="emoji" src="../../static/smile.png" mode="widthFix"></image>
				<image v-else class="emoji" src="../../static/encourage.png" mode="widthFix"></image>
				<view class="result-title">您的估分</view>
				<view class="result-title text-orange">{{ info.mString }}</view>
				<view class="tip">
					<view class="tip-hd">
						<image src="../../static/file.png" mode="widthFix"></image>
						<text>果芽提示：</text>
					</view>
					<view class="tip-bd">{{ tip }}</view>
				</view>
				<view class="desc">
					<view class="desc-hd">【关于上岸概率的定义】</view>
					<view class="desc-bd">
						<view class="desc-item">
							<view>估分低于去年国家线：</view>
							<view>总分或单科任意一门低于去年国家线</view>
						</view>
						<view class="desc-item">
							<view>估分高于去年国家线：</view>
							<view>总分≥去年国家线5分；管综单科≥去年国家线4分 ；英语单科≥去年国家线2分</view>
						</view>
						<view class="desc-item">
							<view>估分持平去年国家线：</view>
							<view>去年国家线≤总分＜去年国家线5分；去年国家线≤管综单科＜去年国家线4分； 去年国家线≤英语单科＜去年国家线2分；</view>
						</view>
					</view>
				</view>
				<!-- <button v-if="isShare" class="sharebtn sharebtn2" type="default" @tap="showReport">
					请查收你的
					<text>上岸分析报告</text>
				</button> -->
				<button  class="sharebtn " type="default"  @tap="showReport">
					点击生成
					<text>深度上岸分析报告</text>
				</button>
				<view class="report">
					<span class="report-hd ">
						<span class="flex align-center">
							<image src="../../static/file.png" mode="widthFix"></image>
							为什么要获取深度上岸分析报告？
						</span>
					</span>
					<view class="report-bd">
						<text class="text-orange">上岸概率仅是</text>
						根据您的估分成绩与历年国家线的对比；
						<text class="text-orange">而深度上岸分析</text>
						是根据你的估分成绩结合国家线、目标院校及专业复试分数线给出的详细上岸分析
					</view>
				</view>
			</view>
			<!-- <view class="ad"  v-if="adInfo"><image :src="fileUrl + adInfo" mode="widthFix"></image></view> -->
			<goods ></goods>
		</scroll-view>
		<fixedcontact></fixedcontact>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import goods from '@/components/goods.vue';
import fixedcontact from '@/components/fixedcontact.vue';
export default {
	name: 'scoreAndRank',
	data() {
		return {
			info: {},
			adInfo: '',
			fileUrl: 'https://apps.guoyamba.com/',
			isShare: false,
			tip: ''
		};
	},
	components: { goods, fixedcontact },
	computed: {
		...mapState(['openid', 'scorelist', 'queStateList'])
	},
	onLoad(options) {
		if (options.area && options.school && options.major) {
			this.checkScore(options);
		}
		// this.getNewsLink();
	},
	methods: {
		...mapMutations(['saveQueState']),
		//再次估分
		estimate(type) {
			let queStateList = { ...this.queStateList };
			if (type == 0) {
				['gz1', 'gz2', 'gz3', 'gz4'].forEach(item => {
					queStateList[item] = {};
				});
			}
			if (type == 1) {
				['en1', 'en2', 'en3', 'en4'].forEach(item => {
					queStateList[item] = {};
				});
			}
			this.saveQueState(queStateList);
			uni.navigateTo({
				url: '/pages/answer/answer?type=' + (type == 0 ? 'gz' : 'en') + '&isRestEstimate=1'
			});
		},
		//查看上岸概率
		viewProbability() {
			uni.navigateTo({
				url: '/pages/probability/probability'
			});
		},
		checkScore(options) {
			let { area, school, major, approval, enscore, gzscore } = options;
			this.$getajax(this.$api.checkScore, {
				openid: this.openid,
				area,
				school,
				major,
				enscore,
				gzscore,
				approval
			}).then(da => {
				if (da.code == 200) {
					this.info = da.data;
					this.getConfigList(this.info.status);
				}
			});
		},

		getNewsLink() {
			// this.$getajax(this.$api.getNewsLink, {
			// 	code: 'g1'
			// }).then(da => {
			// 	this.adInfo = da.data;
			// });
			this.$postajax(this.$api.getConfigList, { type: 'system', code: 'wxpic4' }).then(da => {
				if (da.code == 200) {
					this.adInfo = da.data[0].name;
				}
			});
		},
		showNews() {
			uni.navigateTo({
				url: '/pages/webView/webView?weburl=' + encodeURIComponent(this.adInfo.newsLink)
			});
		},
		showReport() {
			uni.navigateTo({
				url: '/pages/result/result'
			});
		},
		getConfigList(state) {
			//state 0 低于 1高于 2 持平
			let code = state == 0 ? 'tips3' : state == 1 ? 'tips1' : 'tips2';
			this.$postajax(this.$api.getConfigList, { type: 'system', code }).then(da => {
				if (da.code == 200) {
					this.tip = da.data[0].name;
				}
			});
		}
	},
	onShareAppMessage(res) {
		var url = '/pages/index/index';
		this.isShare = true;
		return {
			title: '果芽MBA MEM MPA 联考估分',
			path: url,
			imageUrl: 'https://apps.guoyamba.com/share01.png'
		};
	}
};
</script>

<style lang="scss">
page,
.page-view {
	height: 100%;
	position: relative;
	background: #f1f1f1;
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
	}
	.text-orange {
		color: #e0745c !important;
	}
	.main {
		position: relative;
		z-index: 1;
		min-height: 0;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		.rank {
			.userinfo {
				padding: 20rpx 80rpx;
				font-size: 28rpx;
				color: #fff;
				.avatar {
					border: 7rpx solid #fff;
					border-radius: 100%;
					height: 70rpx;
					width: 70rpx;
					background: #fff;
					margin-right: 25rpx;
					overflow: hidden;
				}
			}
			.rankboard {
				margin: 0 46rpx;
				text-align: center;
				position: relative;
				z-index: 999;
				.line {
					height: 130rpx;
					width: 0;
					border-left: 2rpx dashed #b5b5b5;
				}
				.rank-item {
					position: relative;
					.bg {
						position: relative;
						& + view {
							position: absolute;
							top: 10upx;
							left: 0;
							right: 0;
						}
					}
					.title {
						color: #fff;
						font-size: 29upx;
						line-height: 55upx;
					}
					.score {
						color: #000;
						font-size: 60rpx;
						font-weight: bold;
						margin-top: 15rpx;
						line-height: 1;
						text {
							font-size: 24rpx;
							font-weight: normal;
						}
					}
					.btn {
						width: 179rpx;
						height: 51rpx;
						margin: 15rpx auto 0;
						image {
							display: block;
							width: 179rpx;
							height: 51rpx;
						}
					}
					& + .rank-item {
						margin-left: 7upx;
					}
				}
			}
			.warn {
				font-size: 23rpx;
				margin: 30rpx 20rpx;
				padding-bottom: 40rpx;
				color: #a2a2a2;
				text-align: left;
				image {
					display: block;
					width: 21rpx;
					margin-right: 5rpx;
					margin-top: 5rpx;
				}
			}
		}
		.result {
			background: #fff;
			position: relative;
			top: -15upx;
			padding: 35rpx 0 30rpx;
			.emoji {
				width: 145rpx;
				height: 159rpx;
				display: block;
				margin: 0 auto 25rpx;
				color: #767676;
			}
			.result-title {
				text-align: center;
				font-size: 44rpx;
				font-weight: bold;
				line-height: 70rpx;
				letter-spacing: 5rpx;
			}
			.tip {
				line-height: 50rpx;
				color: #4d4d4d;
				font-size: 30rpx;
				padding-bottom: 25rpx;
				border-bottom: 1px solid #838383;
				margin: 20rpx 75rpx 0;
				.tip-hd {
					font-size: 31rpx;
					margin-bottom: 20rpx;
					image {
						width: 27rpx;
						height: 25rpx;
						margin-right: 10rpx;
					}
				}
			}
			.desc {
				color: #929292;
				font-size: 23rpx;
				line-height: 28rpx;
				margin: 35rpx 75rpx 0;
				.desc-hd {
					font-size: 25rpx;
				}
				.desc-bd {
					border: 1px dashed #929292;
					border-radius: 20rpx;
					padding: 10rpx;
					margin-top: 20rpx;
					.desc-item {
						position: relative;
						padding-left: 20rpx;
						&::before {
							display: block;
							content: '';
							width: 10rpx;
							height: 10rpx;
							border-radius: 100%;
							background: #a8a8a8;
							position: absolute;
							border-radius: 100%;
							left: 0;
							top: 10rpx;
						}
						& + .desc-item {
							margin-top: 15rpx;
						}
					}
				}
			}
			button.sharebtn {
				margin: 77rpx auto 75rpx;
				display: block;
				width: 520rpx;
				height: 86rpx;
				text-align: center;
				line-height: 86rpx;
				background: linear-gradient(to right, #ab73db, #6f1d91);
				font-size: 38rpx;
				color: #fff;
				font-weight: bold;
				text {
					color: #ffd900;
				}
				&.sharebtn2 {
					background: linear-gradient(to right, #2841a4, #4864dc);
				}
			}
			.report {
				text-align: center;
				margin: 0 75rpx;
				.report-hd {
					margin: 0 auto;
					font-size: 29rpx;
					color: #fff;
					padding: 8rpx 20rpx;
					background: #e27d68;
					border-radius: 8rpx;
					display: inline-block;

					image {
						display: block;
						width: 31rpx;
						height: 27rpx;
						margin-right: 10rpx;
					}
				}
				.report-bd {
					font-size: 25rpx;
					text-align: left;
					line-height: 37rpx;
					margin-top: 15rpx;
				}
			}
		}
		.ad {
			padding: 0 26rpx 20rpx;
			background: #fff;
			image {
				display: block;
				width: 100%;
			}
		}
	}
}
</style>
